<template>
  <div class="div1">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <el-input type="text" v-model="msg1"></el-input>
    <el-input type="text" v-model="msg2"></el-input>
    <el-button type="info" @click="submit">跳到HelloWorld</el-button>
  </div>
</template>

<script>
export default {
  //生命周期
  //钩子函数
  // beforeCreate---实例创建之前执行
  //created---实例创建之后执行
  //vue局部组件数据以及局部组件的方法创建完成之后,执行此函数

  // beforeMount---dom节点挂载完成之前
  //mounted--dom节点挂载完成之后

  // beforeUpdate---dom节点更新之前
  //updated---dom节点更新之后

  //beforeDestroyed---(监听器)实例被销毁之前触发
  //destroyed---(监听器)实例被销毁之后   

  data() {
    return {
      msg1: "",
      msg2: "",
    };
  },

  //实例创建
  //   beforeCreate() {
  //     console.log("before", this.msg1);
  //   },
  //   created() {
  //     console.log("after", this.msg1);
  //   },

  //dom节点挂载
  // beforeMount(){
  // console.log(document.getElementById("div1"));
  // },
  // mounted(){
  // console.log(document.getElementById("div1"));
  // },

  //dom节点更新
  //   beforeUpdate() {
  //     console.log(document.getElementById("div1"));
  //   },
  //   updated() {
  //     console.log(document.getElementById("div1"));
  //   },

  //销毁
  beforeDestroyed() {
      console.log(this.msg1);
      console.log(document.getElementById("div1"));
  },
  destroyed() {
      console.log("销毁");
       console.log(this.msg1);
      console.log(document.getElementById("div1"));
  },

  methods: {
    submit() {
      console.log(123);
      //path+query
      //name+params
      this.$router.push({
        path: "/helloWorld",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #444;

  // ul下面的li样式
  li {
    color: red;
  }
}
</style>